<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>显示所有用户</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--ajax方式请求后台-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<!--<shiro:hasRole  name="学术带头人">
<button>学术带头人</button>
</shiro:hasRole >
<shiro:hasRole  name="admin">
<button>admin</button>
</shiro:hasRole >
<shiro:hasPermission  name="/topicInfo/add">
    <button>权限</button>
</shiro:hasPermission >
<shiro:principal></shiro:principal>-->

<div id="chenjian">
    <!--列表顶部搜索和工具条-->
    <el-row>
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input  placeholder="请输入姓名"
                           v-model="username"
                           clearable></el-input>
            </el-form-item>
<!--            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="searchForm.state" placeholder="状态">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>-->
            <el-form-item>
            <el-button type="primary" @click="loadingData" icon="el-icon-search">搜索</el-button>
                <shiro:hasPermission name="/topicInfo/manager">
            <el-button type="success" @click="addClick" icon="el-icon-circle-plus">添加用户</el-button>
                </shiro:hasPermission>
            </el-form-item>
        </el-form>
    </el-row>

    <!---------------------------------用户列表--------------------------------------------->
    <el-table
            :data="userList"
            border
            :default-sort="{prop: 'id', order: 'descending'}"
            @sort-change="sortChange"
            v-loading.body="loading"
    >
        <!--设置默认排序列和排序规则-->
        <el-table-column
                prop="id"
                label="编号"
                width="180"
                :sortable="mysort"
        >
        </el-table-column>
        <el-table-column
                prop="username"
                label="姓名"
                width="180"
        >
        </el-table-column>
        <el-table-column
                prop="password"
                label="密码"
                width="180"
                sortable>
        </el-table-column>
        <el-table-column
                prop="createtime"
                label="创建时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="imageUrls"
                label="头像"
                width="180">
            <!-- 图片的显示 -->
            <template  slot-scope="scope">
                 <img v-for="url in scope.row.imageUrls.split(',')" :src="url" min-width="60" height="60" />
            </template>
        </el-table-column>
        <el-table-column
                label="操作" width="180">
            <template slot-scope="scope">
                <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑
                </el-button>
                <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteUser(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!---------------------------------用户添加对话框--------------------------------------------->
    <el-dialog
            title="添加用户"
            :visible.sync="centerDialogVisible"
            width="30%"
            center >
        <el-form ref="form" :model="form" label-width="80px" >
            <el-form-item label="用户名">
                <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-col>
                    <el-date-picker
                            v-model="form.createtime"
                            type="datetime"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-col>

            </el-form-item>
            <!---------------------图片上传---------------------------------->
            <el-upload
                    action="upload"
                    list-type="picture-card"
                    accept="image/png, image/jpeg"
                    multiple
                    :file-list="form.fileLists"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
                    :show-file-list="true">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleImage">
                <img width="100%" :src="dialogImageUrl" alt="photo">
            </el-dialog>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="mySubmit">确 定</el-button>
  </span>
    </el-dialog>
    <!---------------------------------用户修改对话框--------------------------------------------->
    <el-dialog
            title="修改用户"
            :visible.sync="editcenterDialogVisible"
            width="30%"
            center
            :close-on-click-modal="false">
        <el-form ref="formb" :model="form" label-width="80px">
            <el-form-item label="用户ID">
                <el-input v-model="editform.id"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
                <el-input v-model="editform.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="editform.password"></el-input>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-col>
                    <el-date-picker
                            v-model="editform.createtime"
                            type="datetime"
                            value-format="yyyy-MM-dd hh:mm:ss"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-col>

            </el-form-item>
            <!---------------------修改图片上传---------------------------------->
            <el-upload
                    action="upload"
                    list-type="picture-card"
                    accept="image/png, image/jpeg"
                    multiple
                    :file-list="editeFileLists"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="uploadSuccess"
                    :show-file-list="true">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisibleImage">
                <img width="100%" :src="dialogImageUrl" alt="photo">
            </el-dialog>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="editcenterDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editmySubmit">确 定</el-button>
  </span>
    </el-dialog>
    <!---------------------------------分页--------------------------------------------->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 15, 25, 35]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>

</body>
<script type="text/javascript">
    Vue.component("qy87-h1", {
        template: '<h1>qy87很牛逼！</h1>'
    })
    var vm = new Vue({
        el: '#chenjian',
        data: {
            loading: true,
            userList: [],
            //编辑界面是否显示
            centerDialogVisible: false,
            editcenterDialogVisible: false,
            username: '',
            form: {
                username: '',
                password: '',
                createtime: '',
                fileLists: [],
                imageUrls:''
            },
            editform: {
                username: '',
                password: '',
                createtime: '',
                fileLists:[],
                imageUrls:''
            },
            //编辑用filelist
            editeFileLists:[],
            //当前页
            pageNo: 1,
            //一页显示多少条
            pageSize: 5,
            //总计多少条数据
            total: 0,
            //文件上传
            dialogImageUrl: '',
            //默认不显示
            dialogVisibleImage: false,
            //设置sortable属性
            mysort: 'custom',
            //定义排序所需要的属性
            prop: 'id',
            //默认倒序排列
            order: 'descending',
            //显示加载中样式
            loading:false,
        },
        created() {
           this.loadingData;
        },
        methods: {
            //表格重新加载数据
            loadingData: function () {
                //定义请求的url
                var url = "findAllUserJson";
                //封装分页查询条件
                var query = {"pageNo": vm.pageNo, "pageSize": vm.pageSize, "username": vm.username, "prop": vm.prop, "order": vm.order};
                vm.loading = true;
                setTimeout(function(){
                    console.info("加载数据成功");
                    axios.post(url, query).then(function (response) {
                        vm.userList = response.data.items;
                        vm.total = response.data.totalNum;
                    });
                    vm.loading = false;
                },300);
            },
            deleteUser: function (row) {
                var url = "delUserById?id=" + row.id;
                axios.get(url).then(function (response) {
                    vm.loadingData();//重新加载数据
                    vm.open5(response.data.message);//将后台传入的操作成功失败信息显示在前台
                }).catch(function (error) {
                    console.log(error);
                });
            },
            //添加用户
            addClick: function () {
                vm.centerDialogVisible = true;

            },
            //表格编辑事件
            editClick: function (row) {
                vm.editcenterDialogVisible = true;
                //vm.editform = row;
                //Object.assign()接口可以接收多个参数，第一个参数是
                // 目标对象，后面的都是源对象，assign方法将多个原对象的属性和方法都合并
                // 到了目标对象上面，如果在这个过程中出现同名的属性（方法），后合并的属性（方法）
                // 会覆盖之前的同名属性（方法）。
                vm.editform = Object.assign({}, row);
                var tempArray=vm.editform.imageUrls.split(',');//将字符串转换成字符串数组
                vm.editeFileLists=[];
                for(var i=0;i<tempArray.length;i++){
                    //封装editeFileLists 对象数组
                    vm.editeFileLists.push({"url":tempArray[i]});
                }
            },
            //添加用户提交
            mySubmit: function () {
                var url = "addUser";
                var urls=[];
                for (var i=0;i<vm.form.fileLists.length;i++){
                    urls.push(vm.form.fileLists[i].url);
                }
                vm.form.imageUrls=urls.join(',');
                axios.post(url, vm.form).then(function (response) {
                    //添加成功！
                    vm.centerDialogVisible = false;
                    //恢复添加表单的默认值
                    vm.form={"username":'',"password":'',"password":'',"createtime":'',"fileLists":[]};
                    vm.loadingData();
                    vm.open5(response.data.message)
                }).catch(function (error) {
                    console.log(error);
                });


            },
            //编辑用户提交
            editmySubmit: function () {
                var url = "editUser";
                axios.post(url, vm.editform).then(function (response) {
                    vm.editcenterDialogVisible = false;
                    vm.loadingData();//重新加载数据
                    vm.open5(response.data.message)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            open5(msg) {
                this.$notify.info({
                    title: '消息',
                    message: msg
                });
            },
            //修改一页显示多少行
            handleSizeChange: function (pageSize) {
                vm.pageSize = pageSize;
                //刷新页面
                vm.loadingData();

            },
            //修改当前页
            handleCurrentChange: function (pageNo) {
                //vm.pageNo是全局变量，跟view绑定，参数pageNo是切换当前页传入的值
                vm.pageNo = pageNo;
                //刷新页面
                vm.loadingData();
            },
            //后端排序，当表格的排序条件发生变化的时候会触发该事件
            sortChange: function (column, prop, order) {
                //给全局变量order和prop赋值
                vm.order = column.order;
                vm.prop = column.prop;
                vm.loadingData();//后台重新加载数据
            },
            handleRemove(file, fileList) {
               // console.log(file, fileList);
                vm.fileChange(fileList);
                //删除后台图片
                console.log(vm.fileLists)
            },
            handlePictureCardPreview(file) {
                vm.dialogImageUrl = file.url;
                vm.dialogVisibleImage = true;
            },
            uploadSuccess: function (response, file, fileList) {
                console.log(fileList)
                vm.fileChange(fileList);
            },
            // 设置图片值
            fileChange:function(fileList) {
                if(fileList.length > 0){
                    for(var i=0; i<fileList.length; i++){
                        if(fileList[i].response){
                            vm.form.fileLists.push({"url":fileList[i].response.url})
                        }
                    }
                }
            },


        }

    });
</script>
</body>
</html>